<template>
  <div class="box">
    <div class="card-item" v-for="(item, index) in options" :key="index">
      <div class="head">{{ item.name }}</div>
      <div class="content">
        <div
          class="left column"
          :style="
            `grid-template-rows: repeat(${item.left.length}, calc(100% / ${item.left.length}))`
          "
        >
          <div
            class="item"
            v-for="(colItem, leftIndex) in item.left"
            :key="leftIndex"
          >
            <div class="number">{{ data[colItem.prop] }}</div>
            <div class="label">{{ colItem.name }}</div>
          </div>
        </div>
        <div class="icon">
          <div
            class="img"
            :style="`background-image: url('${item.icon}')`"
          ></div>
        </div>
        <div
          class="right column"
          :style="
            `grid-template-rows: repeat(${item.right.length}, calc(100% / ${item.right.length}))`
          "
        >
          <div
            class="item"
            v-for="(colItem, leftIndex) in item.right"
            :key="leftIndex"
          >
            <div class="number">{{ data[colItem.prop] }}</div>
            <div class="label">{{ colItem.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          name: "主机",
          icon: "/img/screen/icon1.png",
          left: [
            {
              name: "XXX",
              prop: "code11",
            },
            {
              name: "XXX",
              prop: "code12",
            },
          ],
          right: [
            {
              name: "XXX",
              prop: "code13",
            },
            {
              name: "XXX",
              prop: "code14",
            },
            {
              name: "XXX",
              prop: "code15",
            },
          ],
        },
        {
          name: "发电机",
          icon: "/img/screen/icon2.png",
          left: [
            {
              name: "XXX",
              prop: "code21",
            },
            {
              name: "XXX",
              prop: "code22",
            },
          ],
          right: [
            {
              name: "XXX",
              prop: "code23",
            },
            {
              name: "XXX",
              prop: "code24",
            },
            {
              name: "XXX",
              prop: "code25",
            },
          ],
        },
        {
          name: "侧推",
          icon: "/img/screen/icon3.png",
          left: [
            {
              name: "XXX",
              prop: "code31",
            },
            {
              name: "XXX",
              prop: "code32",
            },
          ],
          right: [
            {
              name: "XXX",
              prop: "code33",
            },
            {
              name: "XXX",
              prop: "code34",
            },
          ],
        },
      ],
      data: {
        code11: 101,
        code12: 89,
        code13: 21,
        code14: 23,
        code15: 45424,
        code21: 56,
        code22: 50,
        code23: 20,
        code24: 12,
        code25: 254454,
        code31: 10,
        code32: 10,
        code33: 2,
        code34: 1024,
      },
    };
  },
};
</script>

<style scoped lang="scss">
.box {
  background-image: url("/img/screen/card.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: grid;
  grid-template-rows: repeat(3, calc((100% - 40px) / 3));
  grid-row-gap: 20px;
  padding: 25px 15px;
  .card-item {
    background-color: rgba(49, 49, 90, 0.5);
    border-radius: 3px;
    position: relative;
    .head {
      background-color: #2e4d8f;
      width: 90px;
      height: 24px;
      border-radius: 10px;
      position: absolute;
      top: -12px;
      left: calc(50% - 45px);
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 24px;
    }
    .content {
      height: calc(100% - 20px);
      display: grid;
      grid-template-columns: repeat(3, calc(100% / 3));
      padding: 0 10px;
      .column {
        display: grid;
        .item {
          .number {
            color: #6cf;
            height: 50%;
            display: flex;
            align-items: center;
          }
          .label {
            color: #fff;
            height: 50%;
            display: flex;
            align-items: center;
          }
        }
      }
      .left {
        .item {
          > div {
            justify-content: left;
          }
        }
      }
      .right {
        .item {
          > div {
            justify-content: right;
          }
        }
      }
      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        .img {
          width: 100%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          aspect-ratio: 1 / 1;
        }
      }
    }
  }
}
</style>
